<template>
  <div class="login-page">
    <div class="login-container">
      <div class="logo">
        <van-icon name="wine-cup" size="60" color="#1989fa" />
        <h1>智能酒桶</h1>
        <p>畅享品质生活</p>
      </div>
      
      <div class="form-group">
        <div class="input-wrapper">
          <van-icon name="phone" class="input-icon" />
          <input type="tel" placeholder="请输入手机号" v-model="phone" maxlength="11" />
        </div>
        
        <div class="input-wrapper">
          <van-icon name="closed-eye" class="input-icon" />
          <input type="password" placeholder="请输入密码" v-model="password" />
        </div>
        
        <van-button type="primary" size="large" class="login-button" @click="handleLogin">
          登录
        </van-button>
        
        <div class="form-footer">
          <router-link to="/forget-password" class="forget-password">忘记密码?</router-link>
          <router-link to="/register" class="register-link">新用户注册</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { api } from '../api'
import { showToast, showLoadingToast } from 'vant'

export default {
  name: 'Login',
  data() {
    return {
      phone: '',
      password: ''
    }
  },
  methods: {
    // 处理登录
    async handleLogin() {
      // 表单验证
      if (!this.phone.trim()) {
        showToast('请输入手机号')
        return
      }
      
      if (!/^1\d{10}$/.test(this.phone)) {
        showToast('手机号格式不正确')
        return
      }
      
      if (!this.password.trim()) {
        showToast('请输入密码')
        return
      }
      
      try {
        // 显示加载中
        showLoadingToast({ message: '登录中...', duration: 0 })
        
        // 调用真实API
        const res = await api.userLogin({ phone: this.phone, password: this.password })
        // 保存登录信息
        const userInfo = {
          token: res.data.token,
          user: res.data.user
        }
        
        localStorage.setItem('token', userInfo.token)
        localStorage.setItem('user', JSON.stringify(userInfo.user))
        
        showToast({ message: '登录成功', type: 'success' })
        
        // 获取之前保存的重定向路径
        const redirectPath = sessionStorage.getItem('redirectPath')
        if (redirectPath && redirectPath !== '/login') {
          // 清除重定向记录
          sessionStorage.removeItem('redirectPath')
          // 跳转到之前的页面
          this.$router.push(redirectPath)
        } else {
          // 没有重定向记录则跳转到首页
          this.$router.push('/')
        }
        
      } catch (error) {
        // Toast会自动清除，不需要手动调用clear
        showToast(error.message || '登录失败，请检查手机号和密码')
      }
    }
  }
}
</script>

<style scoped>
.login-page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-container {
  width: 90%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.logo {
  text-align: center;
  margin-bottom: 30px;
}

.logo h1 {
  margin: 15px 0 5px 0;
  font-size: 24px;
  font-weight: bold;
  color: #1989fa;
}

.logo p {
  margin: 0;
  font-size: 14px;
  color: #999;
}

.form-group {
  width: 100%;
}

.input-wrapper {
  position: relative;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.input-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.input-wrapper input {
  width: 100%;
  padding: 12px 0 12px 30px;
  border: none;
  outline: none;
  font-size: 16px;
}

.input-wrapper input::placeholder {
  color: #999;
}

.login-button {
  width: 100%;
  margin-top: 30px;
  padding: 12px 0;
  font-size: 16px;
  border-radius: 8px;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 14px;
}

.forget-password,
.register-link {
  color: #1989fa;
  text-decoration: none;
}
</style>